<template>
    <div>
      <div class="discuss" v-for="(item,index) in commentList" :key="index">
        <div class="img-box">
          <img :lazy-load="true" @error="errorImg(index)" mode="aspectFill" :src="item.head_img ? picPre + item.head_img : picPre + 'front/avatar.jpg'" alt="">
        </div>
        <div class="discuss-main">
          <p>{{item.username}}</p>
          <p>{{item.created_at}}</p>
          <p class="discuss-main-content"><rich-text :nodes="item.comment"></rich-text></p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "index",
      props:{
        commentList:{
          type:Array
        }
      },
      data(){
        let that = this;
        return{
          picPre: that.$api.picPre,
        }
      },
      methods:{
        errorImg(index){
          this.commentList[index].head_img = 'front/avatar.jpg'
        }
      }
    }
</script>

<style scoped>
.discuss{
  padding-top: 20rpx;
  display: flex;
  border-top: 1rpx solid #EEEEEE;
  width: 100%;
}
.img-box{
  width: 64rpx;
  height: 64rpx;
  margin-right: 21rpx;
  overflow: hidden;
  border-radius: 50%;
}
.img-box > img{
  width: 64rpx;
  height: 64rpx;
}
  .discuss-main{
    padding-top: 6rpx;
    flex: 1;
  }
.discuss-main>p:first-child{
  font-size: 24rpx;
  color: #7A7A7A;
  line-height: 30rpx;
}
.discuss-main>p:first-child+p{
  font-size: 20rpx;
  color: #ADADAD;
  line-height: 30rpx;
}
  .discuss-main-content{
    color: #323232;
    font-size: 28rpx;
    line-height: 30rpx;
    margin: 30rpx 0;
    word-break:break-all;
  }
</style>
